<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body{
      width: 100%;
      height: 100%;
    }
    #container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .page {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

    .page:first-child {
      z-index: 1;
    }

    .page:last-child {
      z-index: 0;
      opacity: 0;
    }

    .round1 {
      animation: roundToRight 1s linear forwards;
    }

    @keyframes roundToRight {
      0% {
        z-index: 1;
        transform: translate(0, 0) scale(1);
      }

      100% {
        z-index: 0;
        transform: translate(100%, 0) scale(0.5);
      }
    }

    .round2 {
      animation: roundToLeft 1s linear forwards;
    }

    @keyframes roundToLeft {
      0% {
        z-index: 1;
        transform: translate(50%, 0) scale(0.5);
        opacity: 1;
      }

      100% {
        z-index: 0;
        transform: translate(0, 0) scale(1);
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div id="container">
    <iframe class="page" src="/screen/twoAttack.html"></iframe>
  </div>
  <script src="/screen/src/jquery.js"></script>
  <script>
    function TurnScreen(options) {
      const self = this;
      this.options = options;
      this.index = 1;
      this.timer = null;
      this.pageMap={
        0: '/screen/twoAttack.html',
        1: '/screen/flowStatics.html'
      }
      this.setIFrame = function () {
        console.log(this.index)
        let iframe = (`<iframe class="page" src="${this.pageMap[this.index]}"></iframe>`);
        console.log('insert:', iframe)
        $('#container').append(iframe);
      }
      this.play = function () {
        this.timer = setInterval(() => {
          let pages = $('.page');
          pages.eq(0).addClass('round1');
          pages.eq(1).addClass('round2');
        }, this.options.interval);
      }
      // 给当前第一个动画绑定事件
      this.initEvent = function () {
        $('#container').on('webkitAnimationStart', '.page:first-child', function () {
          console.log('start')
        })
        $('#container').on('webkitAnimationEnd', '.page:first-child', function () {
          // debugger
          console.log('end', this)
          $('.page').removeClass('round1 round2')
          setTimeout(() => {
            $(this).remove();
          })
          if (++self.index >= self.options.list.length) {
            self.index = self.index % self.options.list.length;
          }
          self.setIFrame();
        })
      }
      // debugger
      this.initEvent();
      this.setIFrame();
      this.play();
    }
    let turnScreen = new TurnScreen({
      list: [1, 2],
      interval: 5000
    });
  </script>
</body>

</html>